<blog-header></blog-header>

<div class="main-content" role="main">
  <form novalidate class="login-form" (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm">
    <div class="text-center">
      <h2>登陆</h2>
    </div>

    <div class="auth-form-body">
      <div class="alert alert-danger" *ngIf="error">
        用户名或者密码不正确!
      </div>
      <div class="form-group" [class.has-error]="email.touched && !email.valid">
        <label for="email">邮件:</label>
        <input type="email" name="email" autocomplete="off" class="form-control" id="email" placeholder="Email"
               required [(ngModel)]="model.email" #email="ngModel" [autofocus]="true">

        <div *ngIf="email.touched && !email.valid" class="help-block">
          邮件名必填!
        </div>
      </div>
      <div class="form-group" [class.has-error]="password.touched && !password.valid">
        <label for="password">密码:</label>
        <input type="password" name="password" autocomplete="off" class="form-control" id="password"
               placeholder="Password" required [(ngModel)]="model.password" #password="ngModel"
               (keydown.enter)="loginForm.form.valid && onSubmit(loginForm)">

        <div *ngIf="password.touched && !password.valid" class="help-block">
          登录密码必填!
        </div>
      </div>
      <button type="submit" class="btn btn-primary btn-block" [disabled]="!loginForm.form.valid">登录</button>
    </div>
  </form>

  <blog-footer></blog-footer>
</div>
